<template>
    <div class="enter-work-account-base">
        <div class="account-base-content">
            <div class="account-base-form">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" v-if="ruleForm">
                    <span class="enterprise-tag">企业信息</span>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-row :gutter="20">
                                <el-col :span="24">
                                    <el-form-item label="企业名称" prop="companyName">
                                        <el-input v-model="ruleForm.companyName"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="24">
                                    <el-form-item label="企业性质" prop="companyNature">
                                        <el-select style="width: 100%" v-model="ruleForm.companyNature"
                                                   placeholder="请选择企业性质">
                                            <el-option v-for="item in companyNatureList" :key="item.id"
                                                       :label="item.name"
                                                       :value="item.id.toString()"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="LOGO" prop="name">
                                <el-upload
                                    class="avatar-uploader"
                                    action="#"
                                    :http-request="uploadFaceFiles"
                                    :show-file-list="false"
                                    :on-success="handleAvatarSuccess"
                                    :before-upload="beforeAvatarUpload">
                                    <img v-if="ruleForm.companyLogo" :src="ruleForm.companyLogo" class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="所属行业" prop="belongsIndustry">
                                <el-select style="width: 100%" v-model="ruleForm.belongsIndustry" placeholder="请选择所属行业">
                                    <el-option v-for="item in belongsIndustryList" :key="item.id" :label="item.name"
                                               :value="item.id.toString()"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="企业规模" prop="companyScale">
                                <el-select style="width: 100%" v-model="ruleForm.companyScale" placeholder="请选择所属行业">
                                    <el-option v-for="item in companyScaleList" :key="item.id" :label="item.name"
                                               :value="item.id.toString()"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="所在地区" prop="area">
                                <el-select style="width: 100%" v-model="ruleForm.area" placeholder="请选择所在地区">
                                    <el-option v-for="item in areaList" :key="item.id" :label="item.name"
                                               :value="item.id.toString()"></el-option>

                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="注册资金" prop="registerCapital">
                                <el-input v-model="ruleForm.registerCapital">
                                    <span slot="suffix">万人民币</span>
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="企业网址" prop="companyUrl">
                                <el-input v-model="ruleForm.companyUrl" placeholder="https://">
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="企业简介" prop="companyIntroduction">
                                <el-input type="textarea" v-model="ruleForm.companyIntroduction"
                                          :autosize="{ minRows: 4, maxRows: 8}"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <div class="mt25">
                        <span class="enterprise-tag">联系方式</span>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <div class="flex-row-start">
                                    <el-form-item label="联系人" prop="person" required>
                                        <el-input style="width: 100%" v-model="ruleForm.person"></el-input>
                                    </el-form-item>
                                    <el-form-item class="single-item" label="" prop="personPublic">
                                        <el-checkbox-group class="ml20" v-model="ruleForm.personPublic">
                                            <el-checkbox label="保密" name="1"></el-checkbox>
                                        </el-checkbox-group>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="QQ号码" prop="qq">
                                    <el-input v-model="ruleForm.qq" placeholder="请输入QQ号码"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <div class="flex-row-start">
                                    <el-form-item label="联系电话" prop="phone" required>
                                        <el-input style="width: 100%" v-model="ruleForm.phone"></el-input>
                                    </el-form-item>
                                    <el-form-item class="single-item" label="" prop="phonePublic">
                                        <el-checkbox-group class="ml20" v-model="ruleForm.phonePublic">
                                            <el-checkbox label="保密" name="1"></el-checkbox>
                                        </el-checkbox-group>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <div class="flex-row-start">
                                    <el-form-item label="联系邮箱" prop="email" required>
                                        <el-input style="width: 100%" v-model="ruleForm.email"></el-input>
                                    </el-form-item>
                                    <el-form-item class="single-item" label="" prop="emailPublic">
                                        <el-checkbox-group class="ml20" v-model="ruleForm.emailPublic">
                                            <el-checkbox label="保密" name="1"></el-checkbox>
                                        </el-checkbox-group>
                                    </el-form-item>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <div class="flex-row-start">
                                    <el-form-item label="公司座机" prop="machineNumber">
                                        <el-input style="width: 100%" v-model="ruleForm.machineNumber"></el-input>
                                    </el-form-item>
                                    <el-form-item class="single-item" label="" prop="machinePublic">
                                        <el-checkbox-group class="ml20" v-model="ruleForm.machinePublic">
                                            <el-checkbox label="保密" name="1"></el-checkbox>
                                        </el-checkbox-group>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <el-col :span="24">
                                <el-form-item label="联系地址" prop="contactPhone" required>
                                    <el-input style="width: 100%" v-model="ruleForm.contactPhone"></el-input>
                                </el-form-item>
                            </el-col>
                            <!--<el-col :span="24">
                                <el-form-item class="single-item" prop="date1" required>
                                    <el-checkbox-group class="ml20" v-model="ruleForm.type">
                                        <el-checkbox label="修改联系方式同步到职位" name="1"></el-checkbox>
                                    </el-checkbox-group>
                                </el-form-item>
                            </el-col>-->
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="24">
                                <el-form-item class="single-item">
                                    <el-button type="primary" @click="submitForm('ruleForm')">保存
                                    </el-button>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script>
import { getCompanyBasicsInfoByUser } from '@/api/enterprise/work/center'
import { areaList, belongsIndustryList, companyNatureList, companyScaleList, filesAnon } from '@/api/base'
import { saveCompanyInfo } from '@/api/enterprise/work/account'
import { checkResponse } from '@/utils'

export default {
    name: 'enterpriseWorkJob',
    components: {},
    data() {
        return {
            jobActiveName: 'publish',
            ruleForm:  null,
            rules: {
                companyName: [
                    { required: true, message: '请输入企业名称', trigger: 'blur' }
                ],
                companyNature: [
                    { required: true, message: '请输入企业性质', trigger: 'blur' }
                ],
                belongsIndustry: [
                    { required: true, message: '请输入所属行业', trigger: 'blur' }
                ],
                companyScale: [
                    { required: true, message: '请输入企业规模', trigger: 'blur' }
                ],
                area: [
                    { required: true, message: '请输入所在地区', trigger: 'blur' }
                ],
                companyIntroduction: [
                    { required: true, message: '请输入企业简介', trigger: 'blur' }
                ],
                person: [
                    { required: true, message: '请输入联系人', trigger: 'blur' }
                ],
                phone: [
                    { required: true, message: '请输入联系电话', trigger: 'blur' }
                ],
                email: [
                    { required: true, message: '请输入联系邮箱', trigger: 'blur' }
                ],
                contactPhone: [
                    { required: true, message: '请输入联系地址', trigger: 'blur' }
                ]
                /* name: [
                     { required: true, message: '请输入活动名称', trigger: 'blur' },
                     { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                 ]*/
            },
            companyNatureList: [],
            companyScaleList: [],
            belongsIndustryList: [],
            areaList: []
        }
    },
    created() {
        this.init()
        this.getCompanyScaleList()
        this.getAreaList()
        this.getCompanyNatureList()
        this.getBelongsIndustryList()
    },
    methods: {
        init() {
            getCompanyBasicsInfoByUser().then(res => {
                 /*let res = {
                     datas: {
                         'contactWayInfo': {
                             'person': '2',
                             'personPublic': '2',
                             'phone': '2',
                             'phonePublic': '2',
                             'qq': '2',
                             'email': '2',
                             'emailPublic': '2',
                             'machineNumber': '2',
                             'machinePublic': '2',
                             'contactPhone': '2'
                         },
                         'informationInfo': {
                             'companyName': '腾讯有效公司',
                             'companyNature': '企业性质',
                             'companyNatureDesc': '2',
                             'companyLogo': 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602585926779&di=5900d37d20577b592df2a8be5d05bd99&imgtype=0&src=http%3A%2F%2Fpic.baiqi008.com%2Fuploads%2Fdpdloklov.jpeg',
                             'belongsIndustry': '所属行业',
                             'belongsIndustryDesc': '2',
                             'companyScale': '企业规模',
                             'companyScaleDesc': '2',
                             'area': '深圳',
                             'registerCapital': 2.00,
                             'corporateWelfare': '2',
                             'companyIntroduction': '2'
                         }
                     }
                 }*/
                let data = Object.assign(res.datas.contactWayInfo, res.datas.informationInfo)
                // this.$set(this,'ruleForm',Object.assign(res.datas.contactWayInfo, res.datas.informationInfo))

                data.personPublic = !!parseInt(data.personPublic)
                data.phonePublic = !!parseInt(data.phonePublic)
                data.emailPublic = !!parseInt(data.emailPublic)
                data.machinePublic = !!parseInt(data.machinePublic)

                this.ruleForm = data

            })
        },
        getCompanyNatureList() {
            companyNatureList().then(res => {
                this.companyNatureList = res.datas[0].children
            })
        },
        getBelongsIndustryList() {
            belongsIndustryList().then(res => {
                this.belongsIndustryList = res
            })
        },
        getCompanyScaleList() {
            companyScaleList().then(res => {
                this.companyScaleList = res
            })
        },
        getAreaList() {
            areaList().then(res => {
                this.areaList = res
            })
        },
        submitForm(formName) {
            let app = this
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    app.saveForm()
                } else {
                    return false
                }
            })
        },
        saveForm() {
            const formData = this.ruleForm
            let obj = {
                companyContactInfo: {
                    person: formData.person,
                    personPublic: formData.personPublic,
                    phone: formData.phone,
                    phonePublic: formData.phonePublic,
                    qq: formData.qq,
                    email: formData.email,
                    emailPublic: formData.emailPublic,
                    machineNumber: formData.machineNumber,
                    machinePublic: formData.machinePublic,
                    contactPhone: formData.contactPhone
                },
                companyInfo: {
                    companyName: formData.companyName,
                    companyNature: formData.companyNature,
                    companyNatureDesc: formData.companyNatureDesc,
                    companyLogo: formData.companyLogo,
                    belongsIndustry: formData.belongsIndustry,
                    belongsIndustryDesc: formData.belongsIndustryDesc,
                    companyScale: formData.companyScale,
                    companyScaleDesc: formData.companyScaleDesc,
                    area: formData.area,
                    companyUrl: formData.companyUrl,
                    registerCapital: formData.registerCapital,
                    corporateWelfare: formData.corporateWelfare,
                    companyIntroduction: formData.companyIntroduction
                }
            }
            obj.companyContactInfo.personPublic = obj.companyContactInfo.personPublic ? 1 : 0
            obj.companyContactInfo.phonePublic = obj.companyContactInfo.phonePublic ? 1 : 0
            obj.companyContactInfo.emailPublic = obj.companyContactInfo.emailPublic ? 1 : 0
            obj.companyContactInfo.machinePublic = obj.companyContactInfo.machinePublic ? 1 : 0
            saveCompanyInfo(obj).then(res => {
                if (checkResponse(res, true)) {
                    this.$message.success('操作成功')
                    this.init()
                    this.$router.push('/enterprise/account/approve');
                }
            })
        },
        uploadFaceFiles(params) {
            var vm = this
            const file = params.file,
                fileType = file.type,
                fileName = file.name,
                isImage = fileType.indexOf('pdf') != -1,
                isLt2M = file.size / 1024 / 1024 < 2
            // 这里常规检验，看项目需求而定
            // if (!isImage) {
            //   this.$message.error("只能上传文件格式pdf");
            //   return;
            // }
            // if (!isLt2M) {
            //   this.$message.error("只能上传文件大小小于2M");
            //   return;
            // }
            // 根据后台需求数据格式
            const form = new FormData()
            // 文件对象
            form.append('file', file)
            // 项目封装的请求方法，下面做简单介绍
            filesAnon(form).then(res => {
                this.$set(vm.ruleForm, 'companyLogo', res.url)
            }).catch(res => {
                //this.$message.error("上传失败，请重新上传");
            })
        },
        handleAvatarSuccess(res, file) {
        },
        beforeAvatarUpload(file) {
            // const isJPG = file.type === 'image/jpeg';
            // const isLt2M = file.size / 1024 / 1024 < 2;
            //
            // if (!isJPG) {
            //     this.$message.error('上传头像图片只能是 JPG 格式!');
            // }
            // if (!isLt2M) {
            //     this.$message.error('上传头像图片大小不能超过 2MB!');
            // }
            // return isJPG && isLt2M;
        }
    }
}
</script>
<style lang="scss">
@import "../../../assets/styles/enterprise/base";

.enter-work-account-base {
    background: #FFF;
    padding: 10px 20px;

    .account-base-form {
        padding-right: 40px;
        position: relative;
        color: $text-default;

        .enterprise-tag {
            display: block;
            margin: 10px 0 30px 0;
        }

        .el-form-item__label {
            color: $text-default !important;
        }

        .single-item {
            .el-form-item__content {
                margin-left: 0 !important;
            }
        }

        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }

        .avatar-uploader-icon {
            font-size: 16px;
            color: #8c939d;
            width: 80px;
            height: 80px;
            line-height: 80px;
            text-align: center;
        }

        .avatar {
            width: 80px;
            height: 80px;
            display: block;
        }
    }
}
</style>
